<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Metorik - Responsive Bootstrap 4 Admin Dashboard Template</title>
    <!-- Favicon -->
    <link rel="shortcut icon" href="../src/images/favicon.ico"/>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
    <style type="text/css">
        .ifile {
            position: absolute;
            height: 25px;
            opacity: 0;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            width: 360px;
            margin-top: 4px;
        }
    </style>
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="index.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>DaLao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">添加用户</h5>
                <nav aria-label="breadcrumb">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">添加用户</li>
                    </ul>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">添加新用户</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <form>
                                <div class="form-group">
                                    <div class="add-img-user profile-img-edit">
                                        <img class="profile-pic img-fluid" src="../src/images/user/11.png" alt="profile-pic">
                                        <div class="p-image">
                                            <input type="file" name="upfilename" id="upfilename" size="50"
                                                   class="ifile"
                                                   onchange="txtfilename.value=this.value;" accept="image/*"
                                                   style="border:none;">
                                            <a class="upload-button btn iq-bg-primary" onclick="upfilename.click();"
                                               style="z-index: 999;">
                                                上传图片
                                            </a><input name="txtfilename" type="text" class="box" id="txtfilename"
                                                       size="50"
                                                       readonly style="height: 50px;border:none;" accept="image/*"/>
                                        </div>
                                    </div>
                                    <div class="img-extension mt-3">
                                        <div class="d-inline-block align-items-center">
                                            <span>只允许</span>
                                            <a href="javascript:void(1);">.jpg</a>
                                            <a href="javascript:void(2);">.png</a>
                                            <a href="javascript:void(3);">.jpeg</a>
                                            <span>文件格式</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>用户角色:</label>
                                    <select class="form-control" id="selectuserrole">
                                        <option>选择</option>
                                        <option>网页设计师</option>
                                        <option>Web开发人员</option>
                                        <option>测试仪
                                        <option>Php开发人员</option>
                                        <option>Ios开发者</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="furl">QQ:</label>
                                    <input type="text" class="form-control" id="furl" placeholder="请填写QQ号">
                                </div>
                                <div class="form-group">
                                    <label for="turl">微信:</label>
                                    <input type="text" class="form-control" id="turl" placeholder="请填写WeChat号">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                            <div class="iq-header-title">
                                <h4 class="card-title">新用户信息</h4>
                            </div>
                        </div>
                        <div class="iq-card-body">
                            <div class="new-user-info">
                                <form>
                                    <div class="row">
                                        <div class="form-group col-md-6">
                                            <label for="fname">姓名:</label>
                                            <input type="text" class="form-control" id="fname" placeholder="姓名">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="add1">地址:</label>
                                            <input type="text" class="form-control" id="add1"
                                                   placeholder="当前所在地址">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="cname">公司名称:</label>
                                            <input type="text" class="form-control" id="cname"
                                                   placeholder="公司名称">
                                        </div>
                                        <div class="form-group col-sm-12">
                                            <label>国家:</label>
                                            <select class="form-control" id="selectcountry">
                                               <option>选择国家</option>
                                               <option>中国</option>
                                               <option>美国</option>
                                               <option>印度</option>
                                               <option>非洲</option>
                                            </select>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="mobno">手机号码:</label>
                                            <input type="text" class="form-control" id="mobno"
                                                   placeholder="手机号码">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="email">邮箱:</label>
                                            <input type="email" class="form-control" id="email" placeholder="邮箱">
                                        </div>
                                        <div class="form-group col-md-12">
                                            <label for="city">城镇/城市:</label>
                                            <input type="text" class="form-control" id="city" placeholder="城镇/城市">
                                        </div>
                                    </div>
                                    <hr>
                                    <h5 class="mb-3">安全</h5>
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <label for="uname">用户名:</label>
                                            <input type="text" class="form-control" id="uname" placeholder="用户名">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="pass">密码:</label>
                                            <input type="password" class="form-control" id="pass"
                                                   placeholder="密码">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="rpass">重复密码:</label>
                                            <input type="password" class="form-control" id="rpass"
                                                   placeholder="重复密码">
                                        </div>
                                    </div>
                                    <div class="checkbox">
                                        <label><input class="mr-2" type="checkbox">启用双重身份验证</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">添加新用户</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Wrapper END -->
<!-- Footer -->
<div id="bottom"></div>
<!-- Footer END -->
</body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth Scrollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
</script>
</html>